<template>
    <div class="my-assess">
      <!-- 我的评价-->
      <div class="deposit-content bgwrite">
        <div>
          <div class="top-bg">
              <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                  <div class="left"
                      slot="left">
                      <van-icon name="arrow-left"
                              size="24px"
                              color="#fff" />
                  </div>
                  <div class="title"
                      slot="title">{{title}}</div>
              </van-nav-bar>
          </div>
          <div class="remark-wrapper bgwrite">
              <div class="reset-content">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> 
                    <van-list
                        :loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        class="list-box"
                        >
                        <div class="each-remarks" v-for="(itemA,indexA) in list" :key="indexA">
                            <!-- 原始评价 用户设计师互动 -->
                            <div class="origin-remarks">
                                <!-- 一级 客户留言 -->
                                <div class="origin-wrapper">
                                    <div class="remarkers-header">
                                        <div class="img-case">
                                            <img :src="itemA.createPictorUrl" alt="" v-if="itemA.createPictorUrl">
                                            <img src="@/assets/img/designer/personalCenter/defaultHeadPortrait.png" alt="" v-else>
                                        </div>
                                        <div class="header-reset">
                                            <div class="name-remark">
                                                <div class="name-case">{{itemA.createrUserName?itemA.createrUserName:"无名氏"}}</div>
                                                <!-- <div class="remark-caset">{{itemA.label}}</div> -->
                                            </div>
                                            <div class="date-case">
                                                <div>
                                                    {{itemA.createDate}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="remark-words">{{itemA.content}}</div>
                                    <div class="origin-imgs" v-if="itemA.reviewImgInfoList.length>0">
                                        <div class="each-img" v-for="(itemI, indexI) in itemA.reviewImgInfoList" @click="show_preview(itemA.reviewImgInfoList,index)" :key="indexI">
                                            <img :src="itemI.imageUrl" alt="">
                                        </div>
                                    </div>
                                </div>
                                <!-- 设计师回复 -->
                                <div class="design-words" v-if="itemA.revieweReplyInfo.length>0">
                                    <div class="design-wrapper">
                                        <div classs="words-case">
                                            <div class="header-case">
                                                <div class="right-case">
                                                    <div class="name-case">{{itemA.revieweReplyInfo[0].createName}}</div>
                                                    <div class="date-case">{{itemA.revieweReplyInfo[0].createDate}}</div>
                                                </div>
                                            </div>
                                            <div class="words-case">{{itemA.revieweReplyInfo[0].replyContent}}</div>
                                        </div>
                                        <div class="origin-imgs" v-if="itemA.revieweReplyInfo[0].reviewImgInfoList.length>0">
                                            <div class="each-img" v-for="(itemI, indexI) in itemA.revieweReplyInfo[0].reviewImgInfoList" @click="show_preview(itemA.revieweReplyInfo[0].reviewImgInfoList,index)"   :key="indexI">
                                                <img :src="itemI.imageUrl" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 追加评价 -->
                            <!-- <div class="more-remarks" v-if="itemA.reviewInfos.length>0">
                                <div class="each-more" v-for="(itemR, indexR) in itemA.reRemarks" :key="indexR">
                                    <div class="header-case">用户{{itemR.forDate}}天后追评</div>
                                    <div class="client-remark">{{itemR.details}}</div>
                                    <div class="img-show" v-if="itemR.imgListL.length>0">
                                        <div class="img-case" v-for="(itemImg, indexImg) in itemR.imgListL" :key="indexImg">
                                            <img :src="itemImg.image" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                        </van-list>
                    </van-pull-refresh>
              </div>
          </div>
              <!-- <div class="bar-tips">
                <div class="tip-case">
                    <div class="bar-line"></div>
                </div>
                <div class="tip-case" style="width: 40%;">
                    <div class="words-casew">没有更多评价</div>
                </div>
                <div class="tip-case">
                    <div class="bar-line"></div>
                </div>
            </div> -->
          </div>
        </div>
        <van-image-preview v-model="showPreview"
                       :images="images"
                       :startPosition="index"
                       @change="onChange">
        </van-image-preview>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
export default {
    components: {
    },
    data(){
        return {
          title: "我的评价",
          list: [],
          loading: false,
          isLoading: false,
          finished: false,
          pageNum: 0,
          pageSize: 7,
          oladParams: {},
          showPreview: false,
          images: [],
          index: 0
        }
    },
    created(){
    },
    methods:{
      diffBack () {
          this.$router.push('/designer/personalCenter')
      },
      //预览图片
    show_preview(images,index) {
      this.images = [];
      for(let i of images){
          this.images.push(i.imageUrl)
      }
      this.showPreview = true;
      this.index = index;
    },
     onChange(index) {
      this.index = index;
    },
    // 评价列表
    async requestList(params,cb) {
      this.oladParams = params
      try {
            let responseList = await HTTP('getMyComment', params)                
            if(responseList.code !== 200){
                this.$toast(responseList.msg || '服务器异常')
                return
            }
            let res = responseList.data.map(e => {
                return {
                    ...e
                }
            })
            cb && cb(res)
        } catch (error) {
            this.$toast('数据开小差了')
            cb && cb()
        }
    },
    onRefresh(){
        this.isLoading = true
        this.loading = true
        this.pageNum = 1
        this.requestList({...this.oladParams, pageNum: 1}, (data) => {
            this.list = data
            // 太慢了不差半秒，太快需要延时（因为用户在滑动的时候有心理准备，速度太快了反而担心这是假的）
            setTimeout(() => {
                this.isLoading = false
                this.loading = false
                // 因为是刷新，所以，这个是执行onLoad，进入onLoad之后会进行list的loading的修改状态，从而重新进入onLoad
                this.onLoad()
            }, 500)
        })
    },
    onLoad(){
        this.loading = true
        this.pageNum += 1
        let params = {
            userUid: getuserUid(),
            pageNum: this.pageNum,
            pageSize: this.pageSize,
        }
        setTimeout(() => {
            this.requestList(params, (data) => {
                this.loading = false
                if(params.pageNum === 1){
                    this.list = data
                }else{
                    this.list.push(...data)
                }
                if(data && data.length === 0){
                    this.finished = true
                } else if (this.list.length==0) {
                    this.isShow = true
                    this.finished = false
                }
            })
        }, 0)
    }
    }
}
</script>

<style lang="scss" scoped>
.my-assess{
    .bar-tips{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 1.04rem;
        .tip-case{
             display: inline-block;
            width: 30%;
            height: 1.04rem;
            .bar-line{
                height: 0.52rem;
                border-bottom: 0.01rem solid #E5E5E5;
            }
            .words-casew{
                text-align: center;
                color: #AAAAAA;
                font-size: 0.24rem;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                height: 1.04rem;
                line-height: 1.04rem;
            }
        }
    }
    .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
    }
    .remark-wrapper{
        position: fixed;
        width: 100%;
        padding: 0 0.24rem 0.24rem;
        box-sizing: border-box;
        top: 0.92rem;
        left: 0;
        right: 0;
        overflow-y: scroll;
        bottom: 0rem;
        .each-remarks{
            border-bottom: 0.01rem solid #E5E5E5;
            padding: 0.32rem 0;
            // 原始评论
            .origin-remarks{
                width: 100%;
                .origin-wrapper{
                    .remarkers-header{
                        position: relative;
                        width: 100%;
                        height: 0.74rem;
                        box-sizing: border-box;
                        margin-bottom: 0.24rem;
                        div{
                            display: inline-block;
                            height: 0.74rem;
                        }
                        .img-case{
                            width: 0.74rem;
                            margin-right: 0.2rem;
                            img{
                            width: 0.74rem;
                            height: 0.74rem;
                            }
                        }
                        .header-reset{
                            position: absolute;
                            top: 0;
                            right: 0;
                            left: 0.94rem;
                            .name-remark{
                                width: 58%;
                                padding-right: 2%;
                                height: 0.74rem;
                                div{
                                    display: block;
                                }
                                .name-case{
                                    top: 0;
                                    font-size: 0.28rem;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                    color: #282828;
                                    vertical-align: top;
                                    height: 0.74rem;
                                    line-height: 0.74rem;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                                .remark-caset{
                                    position: relative;
                                    bottom: 0;
                                    color: #959595;
                                    font-size: 0.24rem;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                    height: 0.3rem;
                                    line-height: 0.3rem;

                                }
                            }
                            .date-case{
                                width: 40%;
                                vertical-align: top;
                                height:0.74rem;
                                div{
                                    width: 100%;
                                    height: 0.74rem;
                                    line-height: 0.74rem;
                                    text-align: right;
                                    color: #959595;
                                    font-size: 0.24rem;
                                }
                            }
                        }
                    }
                    .remark-words{
                        box-sizing: border-box;
                        padding-left: 0.94rem;
                        color: #282828;
                        font-size: 0.28rem;
                        line-height: 0.44rem;
                    }
                    .origin-imgs{
                        width: 100%;
                        box-sizing: border-box;
                        padding-left: 0.94rem;
                        margin-top: 0.1rem;
                        div{
                            display: inline-block;
                            margin-right: 0.1rem;
                            width: 1.68rem;
                            height: 1.68rem;
                            border-radius: 0.1rem;
                        }
                        .each-img{
                            img{
                                width: 1.68rem;
                                height: 1.68rem;
                                border-radius: 0.1rem;
                            }
                        } 
                    }
                }
                .design-words{
                    box-sizing: border-box;
                    margin-left: 0.94rem;
                    margin-top: 0.32rem;
                    .design-wrapper{
                        box-sizing: border-box;
                        background: #FAFAFA;
                        width: 100%;
                        padding: 0.24rem;
                        border-radius: 0.1rem;
                        margin-bottom: 0.32rem;
                        .words-case{
                          position: relative;  
                        }
                        
                        .origin-imgs{
                            width: 100%;
                            box-sizing: border-box;
                            margin-top: 0.1rem;
                            div{
                                display: inline-block;
                                margin-right: 0.1rem;
                                width: 1.68rem;
                                height: 1.68rem;
                                border-radius: 0.1rem;
                            }
                            .each-img{
                                img{
                                    width: 1.68rem;
                                    height: 1.68rem;
                                    border-radius: 0.1rem;
                                }
                            } 
                        }
                    }
                    .header-case{
                        box-sizing: border-box;
                        width: 100%;
                        height: 0.3rem;
                        margin-bottom: 0.22rem;
                        .right-case{
                            width: 100%;
                            display: inline-block;
                            height: 0.3rem;
                            line-height: 0.3rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: #BEBEBE;
                            font-size: 0.24rem;
                            div{
                                display: inline-block;
                            }
                            .name-case{
                                text-align: left;
                                width: 49%;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                            .date-case{
                                width: 50%;
                                text-align: right;
                            }
                        }
                    }
                .words-case{
                    color: #4A4A4A;
                    font-size: 0.28rem;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    line-height: 0.44rem;
                }
                }
            }
            // 追加评论
            .more-remarks{
                margin: 0.3rem 0 0 0.94rem;
                .each-more{
                    width: 100%;
                    .header-case{
                        color: #FF5959;
                        margin-bottom: 0.22rem;
                        font-size: 0.24rem;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                    }
                    .client-remark{
                        color: #4A4A4A;
                        font-size: 0.28rem;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        line-height: 0.44rem;
                    }
                    .img-show{
                        margin-top: 0.1rem;
                        .img-case{
                            display: inline-block;
                            margin-right: 0.1rem;
                            width: 1.68rem;
                            height: 1.68rem;
                            border-radius: 0.1rem;
                            img{
                                width: 1.68rem;
                                height: 1.68rem;
                                border-radius: 0.1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>

